<template>
  <view
    class="w-[100vw] h-[100vh] flex items-center justify-center bg-[#dcd9d4]"
  >
    <view
      class="bgI relative w-[90%] h-[500rpx] bg-[#f7f6f2] shadow-lg flex flex-col items-center text-center p-8 border border-[#c8c5b9]"
    >
      <text class="text-[50rpx] text-[#1f3a5f] font-bold mb-2 mt-4"
        >{{ icerId == 1 ? '救助' : '捐赠' }}证书</text
      >
      <text class="text-xs tracking-[6rpx] text-gray-500 mb-5">
        {{ icerId == 1 ? 'HELP CERTIFICATE' : 'DONATION CERTIFICATE' }}
      </text>
      <text class="text-[30rpx] font-semibold mt-2 mb-6">
        {{ user.name }}
      </text>

      <view
        class="text-[20rpx] leading-[50rpx] text-[#333] flex flex-col items-center"
      >
        <text class="block"
          >在HeartNeighbor中参与了活动,献出了您的爱心，我们由衷感谢。</text
        >
        <text class="block">特发此证，以示感谢！</text>
      </view>

      <view class="absolute right-70 bottom-140 text-right text-[20rpx]">
        <text class="block">HeartNeighbor</text>
        <text class="block mt-1">二〇二五年三月</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const icerId = ref<number>(0)

const user = uni.getStorageSync('user')

onLoad((options: any) => {
  // 从options中获取id
  icerId.value = options.id
})
</script>

<style lang="scss" scoped>
.bgI {
  background-image: url('https://img.tukuppt.com/ad_preview/00/20/57/5c9a183fc3b27.jpg!/fw/780');
  background-size: cover;
  background-position: center;
}
</style>
